<template>
  <!-- 常用旅客创建弹出模态框 -->
  <view v-show="hideModal" class="container">
    <view class="mask" @touchmove.stop.prevent @click.stop="close()" />
    <view
      class="content bottom-pos"
      :animation="animationData"
      @touchmove.stop.prevent
    >
      <!-- 编辑旅客 -->
      <view class="edit-traveler">
        <!-- 头部，关闭部分 -->
        <view class="edit-traveler-head">
          <text>{{
            query.type === "EDIT" ? "编辑旅客信息" : "创建旅客信息"
          }}</text>
          <image
            src="@/static/image/default/contacts/close.png"
            @click.stop="close()"
          />
        </view>
        <!--输入框部分-->
        <view class="edit-traveler-input-box">
          <text>{{ language === "EN" ? "姓名" : "First Name" }}</text>
          <input
            :placeholder="
              language === 'EN' ? '在此输入姓名' : '在此输入名字，例如jia jia'
            "
            :value="setData.first_name"
            data-model="first_name"
            type="value"
            placeholder-class="placeholder"
            @blur="changeInput"
          >
          <view
            :class="language === 'EN' ? 'EN-class' : 'CN-class'"
            @click="changeLanguage"
          >{{ language }}</view>
          <!-- <image src="@/static/image/default/contacts/contacts.png" /> -->
        </view>
        <view v-if="language === 'CN'" class="edit-traveler-input-box">
          <text>Last Name</text>
          <input
            placeholder="在此输入姓氏，例如Guo"
            placeholder-class="placeholder"
            :value="setData.last_name"
            data-model="last_name"
            type="value"
            @blur="changeInput"
          >
        </view>
        <view class="edit-traveler-input-box">
          <text>联系方式</text>
          <input
            placeholder="在此输入联系方式"
            placeholder-class="placeholder"
            :value="setData.telephone"
            data-model="telephone"
            type="value"
            @blur="changeInput"
          >
        </view>
        <view class="edit-traveler-input-box">
          <text>{{ commonDictMap[id_type] }} </text>
          <input
            :placeholder="
              id_type === 'GovernmentId' ? '在此输入身份证' : '在此输入护照'
            "
            placeholder-class="placeholder"
            :value="setData.id_no"
            data-model="id_no"
            type="value"
            @blur="changeInput"
          >
          <image
            src="@/static/image/default/contacts/transformation.png"
            @click="changeID"
          />
        </view>
        <!-- 保存编辑 -->
        <button
          :class="
            devtools === 'ios'
              ? 'edit-traveler-save edit-traveler-save-ios'
              : 'edit-traveler-save'
          "
          @click="createAndEditGuest"
        >
          {{ query.type === "EDIT" ? "保存编辑" : "保存创建" }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { createAndEditGuest } from '@api/mine'
import { get } from '@utils/storage'
import { showToast, extractionAnimation } from '@utils/myApproach'
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    query: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      hideModal: false, // 模态框的状态  true-隐藏  false-显示
      animationData: {}, //
      val: 0,
      language: 'EN',
      id_type: 'GovernmentId',
      commonDictMap: this.$commonDictMap,
      uid: null,
      setData: {
        id_no: '',
        telephone: '',
        first_name: '',
        last_name: ''
      }
    }
  },
  computed: {
    devtools() {
      return get('devtools')
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.showModal()
      }
    },
    query(val) {
      this.uid = null
      if (this.query.type === 'EDIT') {
        this.setData.id_no = this.query.item.id_no
        this.setData.telephone = this.query.item.telephone
        this.id_type = this.query.item.id_type_display
        this.uid = this.query.item.uid
        this.language =
          this.query.item.name_type_display === 'CN' ? 'EN' : 'CN'
        if (this.language === 'EN') {
          this.setData.first_name = this.query.item.full_name
        } else {
          this.setData.first_name = this.query.item.first_name
          this.setData.last_name = this.query.item.last_name
        }
      }
    }
  },
  methods: {
    // 显示遮罩层
    showModal: function() {
      var that = this
      that.hideModal = true
      this.animation = extractionAnimation()
      setTimeout(function() {
        that.fadeIn() // 调用显示动画
      }, 50)
      if (this.query.type !== 'EDIT') {
        this.setData.id_no = ''
        this.setData.telephone = ''
        this.setData.first_name = ''
        this.setData.last_name = ''
        this.id_type = 'GovernmentId'
        this.language = 'EN'
        this.uid = null
      }
    },
    // 隐藏遮罩层
    close: function() {
      var that = this
      this.animation = extractionAnimation()
      that.fadeDown() // 调用隐藏动画
      setTimeout(function() {
        that.hideModal = false
        that.$emit('close', !that.show)
      }, 50) // 先执行下滑动画，再隐藏模块
    },
    // 动画集
    fadeIn: function() {
      this.animation.translateY(0).step()
      this.animationData = this.animation.export() // 动画实例的export方法导出动画数据传递给组件的animation属性
    },
    fadeDown: function() {
      this.animation.translateY(820).step() // 移动的距离
      this.animationData = this.animation.export()
    },
    // 改变语言
    changeLanguage() {
      this.language = this.language === 'EN' ? 'CN' : 'EN'
      this.setData.first_name = ''
    },
    // 改变证件类型
    changeID() {
      this.id_type =
        this.id_type === 'GovernmentId' ? 'Passport' : 'GovernmentId'
      this.setData.id_no = ''
    },
    // 创建编辑旅客
    createAndEditGuest() {
      const query = {
        type: this.query.type,
        name_type: this.language === 'CN' ? 'EN' : 'CN',
        id_type: this.id_type,
        id_no: this.setData.id_no,
        telephone: this.setData.telephone
      }
      switch (query.type) {
        case 'EDIT':
          query.uid = this.uid
          break
      }
      switch (query.name_type) {
        case 'CN':
          query.name = this.setData.first_name
          if (query.name === '') {
            return showToast('姓名不能位空')
          }
          break
        case 'EN':
          query.first_name = this.setData.first_name
          query.last_name = this.setData.last_name
          if (query.first_name === '') {
            return showToast('Firstname不能为空')
          } else if (query.last_name === '') {
            return showToast('Lastname不能为空')
          }
          break
      }

      // 判断中英文姓名手机身份证护照是否长度争取

      if (query.telephone.length !== 11) {
        return showToast('请输入正确的手机号')
      }
      if (query.id_type === 'GovernmentId' && query.id_no.length !== 18) {
        return showToast('请输入正确的身份证号码')
      }
      if (query.id_type === 'Passport' && query.id_no.length !== 9) {
        return showToast('请输入正确的护照号码')
      }
      createAndEditGuest(query).then((res) => {
        if (res.data.code === 200) {
          this.close()
          this.$emit('createAndEditGuest', [query.type, query.uid])
        } else {
          showToast(query.type === 'ENIT' ? '编辑失败' : '创建失败')
        }
      })
    },
    // 同步input
    changeInput(e) {
      const item = e.currentTarget.dataset.model
      this.setData[item] = e.detail.value
    }
  }
}
</script>

<style >
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  position: fixed;
  top: 0;
  left: 0;
}
.content {
  width: 100%;
  height: 820rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  z-index: 21;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}
/*动画前初始位置*/
.bottom-pos {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
</style>

<style>
/* 编辑旅客样式 */
.edit-traveler {
  width: 100%;
  height: 100%;
}
.edit-traveler-head {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 50rpx;
}
.edit-traveler-head > text {
  font-size: 32rpx;
  color: #000000;
  font-weight: 400;
  margin-left: 30rpx;
}
.edit-traveler-head > image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 30rpx;
  margin-top: 6rpx;
}

/* 输入框，外部包裹 */
.edit-traveler-input-box {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 690rpx;
  height: 60rpx;
  margin-left: 30rpx;
  border-bottom: 2rpx solid #f1f1f1;
  font-size: 28rpx;
  color: #000000;
  margin-top: 30rpx;
}
.edit-traveler-input-box > input {
  position: absolute;
  margin-left: 184rpx;
  width: 320rpx;
}
.edit-traveler-input-box > image {
  width: 32rpx;
  height: 32rpx;
}
.EN-class {
  margin-left: 504rpx;
}
.CN-class {
  margin-left: 409rpx;
}
.placeholder {
  font-size: 28rpx;
  color: #cccccc;
}
/* 保存编辑 */
.edit-traveler-save {
  padding: 0;
  text-align: center;
  line-height: 80rpx;
  position: absolute;
  bottom: 40rpx;
  color: #ffffff;
  background-color: #306de9;
  width: 650rpx;
  height: 80rpx;
  margin-left: 50rpx;
  font-size: 32rpx;
}
.edit-traveler-save-ios {
  bottom: 100rpx;
}
</style>

